<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地平线生活服务</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
	
    <link rel="stylesheet" href="/static/style/ydui.css"/>
    <script src="/static/js/ydui.flexible.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script>
		wx.config(
			{$wxConfig}
		);
		wx.ready(function(){
			wx.hideOptionMenu();
		})
	</script>
</head>
<style>
	.title{margin-top: 0.16rem;font-weight: 400;}
	.goods{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;gap:0.3rem;background:#fff;padding:0.15rem;}
	.goods .item{display: flex; flex-basis: 2.2rem;flex-direction: column;align-items: center;border: 1px solid #efefef; border-radius: 5px;padding:0 0.12rem 0.12rem;}
	.goods .item .header{background:#efefef;padding:0.12rem 0.24rem; border-left: 1px solid #efefef; border-right: 1px solid #efefef;border-bottom: 1px solid #efefef; border-radius: 3px;}
	.goods .item .content{padding:0.12rem;font-size: 0.48rem; font-weight: 400;}
	.submit{padding:0.12rem;}
	.goods .item.active{border-color: #FF5E53;background-color: #FF5E5319;}
	.goods .item.active .header{border-color: #FF5E53;background-color: #FF5E5319;}
	.goods .item.active .content{color:#FF5E53;}
</style>
<body>
<section class="g-flexview">
	<header class="m-navbar">
		<a href="#" class="navbar-item"><i class="back-ico"></i></a>
		<div class="navbar-center"><span class="navbar-title">充值套餐</span></div>
	</header>
    <div class="g-scrollview">
		<div class="btn btn-warning title">请选择套餐</div>
		<div class="goods">
            {volist name="list" id="vo"}
			<div class="item" data-id="{$vo.id}">
				<div class="header">赠送{$vo.extra_amount}</div>
				<div class="content">¥{$vo.goods_price}</div>
			</div>
			{/volist}
		</div>
		<div class="submit">
		<a href="javascript:;" id="submitBtn" class="btn btn-block btn-danger">确认充值</a>
		</div>
    </div>
</section>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/ydui.js"></script>
<script>
	!function (win, $) {
		var dialog = win.YDUI.dialog;
		$('.item').on('click',function(){
			var $this = $(this);
			$('.item').removeClass('active');
			$this.addClass('active');
		})
		$('#submitBtn').on('click',function(){
			if($('.item').hasClass('active')==false){
				dialog.toast('请选择套餐', 'error', 1500);
				return false
			}
			$('.active').data('id');
		})
	}(window, jQuery);
</script>
</body>
</html>